<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>时区小工具</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container" id="app" v-cloak>
        <div class="jumbotron">
            <h2>时区时间转换工具</h2>
            <div class="small">指定时区后，可以将时间戳转为时间文本，也可以将时间文本转为时间戳</div>
        </div>

        <form class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-4" for="timezone">时区选择</label>
                <div class="col-sm-6">
                    <select class="form-control" id="timezone" v-model="timezoneSelected">
                        <option value="EST5EDT">EST5EDT (GMT -04:00 / -05:00)</option>
                        <option value="America/New_York">America/New_York (GMT -04:00 / -05:00)</option>
                        <option value="Asia/Shanghai">Asia/Shanghai(GMT +08:00)</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-4 control-label" for="timestamp">时间戳</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-4">
                            <input class="form-control" type="text" id="start-timestamp" placeholder="开始时间(秒)" v-model="startTimestamp">
                        </div>
                        <div class="col-sm-1">
                            <p class="form-control-static" style="text-align: center;">~</p>
                        </div>
                        <div class="col-sm-4">
                            <input class="form-control" type="text" id="end-timestamp" placeholder="结束时间(秒)" v-model="endTimestamp">
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4">结果</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-4">
                            <p class="form-control-static well well-sm">{{ convertedStartDatetime }}</p>
                        </div>
                        <div class="col-sm-1">
                            <p class="form-control-static" style="text-align: center;">~</p>
                        </div>
                        <div class="col-sm-4">
                            <p class="form-control-static well well-sm">{{ convertedEndDatetime }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <div class="form-group">
                <label class="control-label col-sm-4" for="date-time">日期时间</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-4">
                            <input class="form-control" type="text" id="start-date-time" placeholder="年 月 日 时 分 秒 " v-model="startDatetime">
                        </div>
                        <div class="col-sm-1">
                            <p class="form-control-static" style="text-align: center;">~</p>
                        </div>
                        <div class="col-sm-4">
                            <input class="form-control" type="text" id="end-date-time" placeholder="年 月 日 时 分 秒 " v-model="endDatetime">
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-4">结果</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-3">
                            <p class="form-control-static well well-sm">{{ convertedStartTimestamp }}</p>
                        </div>
                        <div class="col-sm-1">
                            <button type="button" class="btn btn-sm btn-default"
                            v-clipboard:copy="convertedStartTimestamp" v-clipboard:error="onCopyError">Copy</button>
                        </div>
                        <div class="col-sm-1">
                            <p class="form-control-static" style="text-align: center;">~</p>
                        </div>
                        <div class="col-sm-3">
                            <p class="form-control-static well well-sm">{{ convertedEndTimestamp }}</p>
                        </div>
                        <div class="col-sm-1">
                            <button type="button" class="btn btn-sm btn-default"
                    v-clipboard:copy="convertedEndTimestamp" v-clipboard:error="onCopyError">Copy</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script src="./lib/vue.min.js"></script>
    <script src="./lib/vue-clipboard.min.js"></script>
    <script src="./lib/moment.js"></script>
    <script src="./lib/moment-timezone-with-data.js"></script>

    <script type="text/javascript">
		var app = new Vue({
            el: '#app',
            data: {
                timezoneSelected: 'EST5EDT',
                startTimestamp: '',
                endTimestamp: '',
                startDatetime: '',
                endDatetime: '',
                dateTimeTemplate: 'YYYY M D H m s'
            },
            computed: {
                convertedStartDatetime: function() {
                    return this.startTimestamp === '' ? '--' : moment.tz(this.startTimestamp * 1000, this.timezoneSelected).format();
                },
                convertedEndDatetime: function() {
                    return this.endTimestamp === '' ? '--' : moment.tz(this.endTimestamp * 1000, this.timezoneSelected).format();
                },
                convertedStartTimestamp: function() {
                    return this.startDatetime === '' ? '--' : moment.tz(this.startDatetime, this.dateTimeTemplate, this.timezoneSelected).unix();
                },
                convertedEndTimestamp: function() {
                    return this.endDatetime === '' ? '--' : moment.tz(this.endDatetime, this.dateTimeTemplate, this.timezoneSelected).unix();
                }
            },
            methods: {
                onCopyError: function() {
                    alert('Copy Error');
                }
            }
        });
    </script>
</body>
</html>